<template>
  <div class="qiandao-root">
    <div>
      <div>
        <van-nav-bar
          :title="title"
          left-text="返回"
          right-text="积分明细"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
        />
      </div>
      <div class="container">
        <div class="a1">
          <div>
            <p>可用积分</p>
            <h2>100</h2>
          </div>
        </div>

        <div class="a2">
          <p>每日签到</p>
          <div>
            <van-steps
              :active="active"
              active-icon="success"
              inactive-icon="circle"
              active-color="#38f"
              inactive-color="#fff"
              @click="clickStep"
            >
              <van-step>1天</van-step>
              <van-step>2天</van-step>
              <van-step>3天</van-step>
              <van-step>4天</van-step>
              <van-step>5天</van-step>
              <van-step>6天</van-step>
              <van-step>7天</van-step>
            </van-steps>
          </div>
          <div class="bottom">
            <span>已连续签到1天</span>
          </div>
        </div>

        <div>
          <p></p>
          <ul>
            <li>
              <div>
                <div>￥10</div>
                <div>
                  <p>全场通用</p>
                  <div>满300使用</div>
                </div>
              </div>
              <div>
                <span>200积分兑换</span>
              </div>
            </li>
            <li>
              <div>
                <div>￥10</div>
                <div>
                  <p>全场通用</p>
                  <div>满300使用</div>
                </div>
              </div>
              <div>
                <span>200积分兑换</span>
              </div>
            </li>
            <li>
              <div>
                <div>￥10</div>
                <div>
                  <p>全场通用</p>
                  <div>满300使用</div>
                </div>
              </div>
              <div>
                <span>200积分兑换</span>
              </div>
            </li>
            <li>
              <div>
                <div>￥10</div>
                <div>
                  <p>全场通用</p>
                  <div>满300使用</div>
                </div>
              </div>
              <div>
                <span>200积分兑换</span>
              </div>
            </li>
          </ul>
        </div>

        <div>
          <p>积分抵现好物</p>
          <ul>
            <li></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script >
import Vue from "vue";
import { NavBar } from "vant";

Vue.use(NavBar);

import { Icon } from 'vant';

Vue.use(Icon);
import { Step, Steps } from "vant";

Vue.use(Step);
Vue.use(Steps);

export default {
  components: {},
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {},
    clickStep(){
        console.log(11)
    },
  },
  data() {
    return {
      title: "我的积分",
      active:0,
      
    };
  },

};
</script>

<style lang="stylus" scoped>
.a1 {
  height: 1.6rem;
  overflow: hidden;
  color: white;
  background-image: url('../../../../public/ykf-img/banner1.png');
  background-color: rgb(0, 0, 0);
  text-align: center;

  >div {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;

    p {
      font-size: 0.13rem;
      margin-top: 0.15rem;
      margin-bottom: 0.13rem;
    }

    h2 {
      // background-color rgba(0,0,0,0.5)
      font-size: 0.36rem;
      line-height: 1;
    }
  }
}

.a2 {
  position: absolute;
  width: 3.35rem;
  height: 1.82rem;
  border-radius: 0.1rem;
  background: linear-gradient(135deg, rgba(102, 110, 232, 1) 0%, rgba(102, 110, 232, 1) 0%, rgba(153, 153, 255, 1) 98%, rgba(153, 153, 255, 1) 100%);
  left: 0.2rem;
  top: 1.5rem;
  color: white;
  padding: 0.15rem;

  p {
    font-size: 0.15rem;
  }

}
.van-steps
    background-color #00000000
    color white
.van-steps__items .van-step__title
    background-color #ffffff00
.bottom
    text-align center
    margin-top .15rem
    span 
        display inline-block
        width 1.2rem
        height .32rem
        line-height .32rem
        font-size .16rem
        background-color #ffffff50
        border-radius .16rem

</style>